<template>
  <div class="echarts" ref="echartRef">dwadadw</div>
</template>
<script setup>
import Socket from '../utils/request/websocketEchart'
import { inject, onMounted, reactive, ref } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const echarts = inject('echarts')
let Myecharts = reactive({})
const echartRef = ref(null)
// const nowDate = ref(null)
// const xData = ref([])
const Data = ref([])
// const timer = ref(null)
const io = new Socket()
function initChart () {
  Myecharts = echarts.init(echartRef.value)
  const initOption = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'time',
      axisTick: {
        alignWithLabel: true
      },
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      max: 100,
      min: 1
    },
    series: [
      {
        name: '连接人数',
        type: 'line',
        smooth: true,
        areaStyle: {}
      }
    ]
  }
  Myecharts.setOption(initOption)
  Myecharts.showLoading({
    type: 'default',
    opts: {
      text: 'loading',
      color: '#c23531',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0,
      // 字体大小。从 `v4.8.0` 开始支持。
      fontSize: 12,
      // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
      showSpinner: true,
      // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
      spinnerRadius: 10,
      // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
      lineWidth: 5,
      // 字体粗细。从 `v5.0.1` 开始支持。
      fontWeight: 'normal',
      // 字体风格。从 `v5.0.1` 开始支持。
      fontStyle: 'normal',
      // 字体系列。从 `v5.0.1` 开始支持。
      fontFamily: 'sans-serif'
    }
  })
}
function updataChart () {
  const updataOption = {
    series: [
      {
        data: Data.value
      }
    ]
  }
  Myecharts.setOption(updataOption)
}
function screenChart () {
  Myecharts.resize()
}
function sockets () {
  io.connect()
  io.receive('count', (res) => {
    Data.value.push(res)
    if (Data.value.length > 6) {
      Data.value.shift()
    }
    updataChart()
    Myecharts.hideLoading()
  })
}
onBeforeRouteLeave(() => {
  io.disConnect()
})
onMounted(() => {
  initChart()
  updataChart()
  sockets()
  window.addEventListener('resize', screenChart)
  // 绘制图表
})
</script>
<style lang="less" scoped>
.echarts {
  flex: 1;
}
</style>
